<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=2.0,user-scalable=yes">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/didi.css" />
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						if(clientWidth >= 640) {
							docEl.style.fontSize = '100px';
						} else {
							docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
						}
					};

				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>

		<title>第1关</title>
		<style type="text/css">
			.wrap2 {
				display: none;
			}
			
			.wrap3 {
				display: none;
			}
			
			.wrap4 {
				display: none;
			}
			
			.wrap5 {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class=" wrap wrap1">
			<div class="head head1">
				<img src="img/head.png" />
			</div>
			<div class="image image1">
				<img class="im1 im1.1" src="img/关1-4_03.png" />
				<img class="im2 im1.2" src="img/关1-3_03.png" />
			</div>
			<div class="answer answer1">
				<div class="ans ans1"></div>
				<div class="ans ans1"></div>
			</div>
			<div class="choice choice1">
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
				<div class="cho cho1"></div>
			</div>
			<div class="bg bg1">
				<img class="right right1" src="img/关1-1_03.png" />
				<img class="wrong wrong1" src="img/关1-2_03.png" />
			</div>
		</div>
		<div class="wrap wrap2">
			<div class="head head2">
				<img src="img/head.png" />
			</div>
			<div class="image image2">
				<img class="im1 im2.1" src="img/2_答题.png" />
				<img class="im2 im2.2" src="img/2_fail.png" />
			</div>
			<div class="answer answer2">
				<div class="ans ans2"></div>
				<div class="ans ans2"></div>
				<div class="ans ans2"></div>

			</div>
			<div class="choice choice2">
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
				<div class="cho cho2"></div>
			</div>
			<div class="bg bg2">
				<img class="right right2" src="img/正-2.png" />
				<img class="wrong wrong2" src="img/否-2.png" />
			</div>
		</div>
		<div class="wrap wrap3">
			<div class="head head3">
				<img src="img/head.png" />
			</div>
			<div class="image image3">
				<img class="im1 im3.1" src="img/2_答题.png" />
				<img class="im2 im3.2" src="img/2_fail.png" />
			</div>
			<div class="answer answer3">
				<div class="ans ans3"></div>
				<div class="ans ans3"></div>
				<div class="ans ans3"></div>

			</div>
			<div class="choice choice3">
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
				<div class="cho cho3"></div>
			</div>
			<div class="bg bg3">
				<img class="right right3" src="img/正-2.png" />
				<img class="wrong wrong3" src="img/否-2.png" />
			</div>
		</div>
		<div class="wrap wrap4">
			<div class="head head4">
				<img src="img/head.png" />
			</div>
			<div class="image image4">
				<img class="im1 im4.1" src="img/2_答题.png" />
				<img class="im2 im4.2" src="img/2_fail.png" />
			</div>
			<div class="answer answer4">
				<div class="ans ans4"></div>
				<div class="ans ans4"></div>
				<div class="ans ans4"></div>
				<div class="ans ans4"></div>
			</div>
			<div class="choice choice4">
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
				<div class="cho cho4"></div>
			</div>
			<div class="bg bg4">
				<img class="right right4" src="img/正-2.png" />
				<img class="wrong wrong4" src="img/否-2.png" />
			</div>
		</div>
		<div class="wrap wrap5">
			<div class="head head5">
				<img src="img/head.png" />
			</div>
			<div class="image image5">
				<img class="im1 im5.1" src="img/2_答题.png" />
				<img class="im2 im5.2" src="img/2_fail.png" />
			</div>
			<div class="answer answer5">
				<div class="ans ans5"></div>
				<div class="ans ans5"></div>
				<div class="ans ans5"></div>
				<div class="ans ans5"></div>
			</div>
			<div class="choice choice5">
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
				<div class="cho cho5"></div>
			</div>
			<div class="bg bg5">
				<img class="right right5" src="img/正-2.png" />
				<img class="wrong wrong5" src="img/否-2.png" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var wrap1 = document.getElementsByClassName("wrap1")[0];
		var wrap2 = document.getElementsByClassName("wrap2")[0];
		var wrap3 = document.getElementsByClassName("wrap3")[0];
		var wrap4 = document.getElementsByClassName("wrap4")[0];
		var wrap5 = document.getElementsByClassName("wrap5")[0];
		var str = new Array(wrap1, wrap2, wrap3, wrap4, wrap5); //用于跳转关卡

		var anss1 = document.getElementsByClassName("ans1");
		var anss2 = document.getElementsByClassName("ans2");
		var anss3 = document.getElementsByClassName("ans3");
		var anss4 = document.getElementsByClassName("ans4");
		var anss5 = document.getElementsByClassName("ans5");

		var chos1 = document.getElementsByClassName("cho1");
		var chos2 = document.getElementsByClassName("cho2");
		var chos3 = document.getElementsByClassName("cho3");
		var chos4 = document.getElementsByClassName("cho4");
		var chos5 = document.getElementsByClassName("cho5");

		var bg1 = document.getElementsByClassName("bg1")[0];
		var bg2 = document.getElementsByClassName("bg2")[0];
		var bg3 = document.getElementsByClassName("bg3")[0];
		var bg4 = document.getElementsByClassName("bg4")[0];
		var bg5 = document.getElementsByClassName("bg5")[0];

		var right1 = document.getElementsByClassName("right1")[0];
		var right2 = document.getElementsByClassName("right2")[0];
		var right3 = document.getElementsByClassName("right3")[0];
		var right4 = document.getElementsByClassName("right4")[0];
		var right5 = document.getElementsByClassName("right5")[0];

		var wrong1 = document.getElementsByClassName("wrong1")[0];
		var wrong2 = document.getElementsByClassName("wrong2")[0];
		var wrong3 = document.getElementsByClassName("wrong3")[0];
		var wrong4 = document.getElementsByClassName("wrong4")[0];
		var wrong5 = document.getElementsByClassName("wrong5")[0];

		var im1_1 = document.getElementsByClassName("im1.1")[0];
		var im2_1 = document.getElementsByClassName("im2.1")[0];
		var im3_1 = document.getElementsByClassName("im3.1")[0];
		var im4_1 = document.getElementsByClassName("im4.1")[0];
		var im5_1 = document.getElementsByClassName("im5.1")[0];

		var im1_2 = document.getElementsByClassName("im1.2")[0];
		var im2_2 = document.getElementsByClassName("im2.2")[0];
		var im3_2 = document.getElementsByClassName("im3.2")[0];
		var im4_2 = document.getElementsByClassName("im4.2")[0];
		var im5_2 = document.getElementsByClassName("im5.2")[0];

		var contArr1 = new Array("小", "图", "模", "专", "拼", "快", "画", "车");
		var contArr2 = new Array("口", "一", "咬", "钱", "嘴", "张", "齿", "价");
		var contArr3 = new Array("安", "两", "基", "友", "限", "全", "禁", "人");
		var contArr4 = new Array("起", "脚", "零", "踩", "包", "红", "步", "钱");
		var contArr5 = new Array("线", "乌", "毛", "路", "规", "球", "划", "鹿");

		//记录玩的关卡
		var grade1 = 0;
		var grade2 = 0;
		var grade = 0;

		//计时
		var timer = null;

		//打乱数组顺序
		function disArr() {
			var arr = new Array();
			for(var i = 0; i < 8; i++) {
				arr.push(i);
			}
			return arr.sort(function() {
				return 0.5 - Math.random();
			});
		}
		
		//为choice添加文字内容
		function freshCont1() {
			var newContArr = disArr();
			for(var i = 0; i < newContArr.length; i++) {
				chos1[i].innerHTML = contArr1[newContArr[i]];
			}
		}
		freshCont1();

		function freshCont2() {
			var newContArr = disArr();
			for(var i = 0; i < newContArr.length; i++) {
				chos2[i].innerHTML = contArr2[newContArr[i]];
			}
		}

		function freshCont3() {
			var newContArr = disArr();
			for(var i = 0; i < newContArr.length; i++) {
				chos3[i].innerHTML = contArr3[newContArr[i]];
			}
		}

		function freshCont4() {
			var newContArr = disArr();
			for(var i = 0; i < newContArr.length; i++) {
				chos4[i].innerHTML = contArr4[newContArr[i]];
			}
		}

		function freshCont5() {
			var newContArr = disArr();
			for(var i = 0; i < newContArr.length; i++) {
				chos5[i].innerHTML = contArr5[newContArr[i]];
			}
		}
		
		var str2 = new Array(freshCont1, freshCont2, freshCont3, freshCont4, freshCont5);

		//选字完成
		function over1() {
			if(anss1[0].innerHTML == "拼" && anss1[1].innerHTML == "车") {
				bg1.style.display = "block";
				right1.style.display = "block";
				wrong1.style.display = "none";
				grade1++;
				return grade1;
			} else {
				bg1.style.display = "block";
				right1.style.display = "none";
				wrong1.style.display = "block";
				im1_1.style.display = "none";
				im1_2.style.display = "block";
			}
		}

		function over2() {
			if(anss2[0].innerHTML == "一" && anss2[1].innerHTML == "口" && anss2[2].innerHTML == "价") {
				bg2.style.display = "block";
				right2.style.display = "block";
				wrong2.style.display = "none";
				grade1++;
				return grade1;
			} else {
				bg2.style.display = "block";
				right2.style.display = "none";
				wrong2.style.display = "block";
				im2_1.style.display = "none";
				im2_2.style.display = "block";
			}
		}

		function over3() {
			if(anss3[0].innerHTML == "限" && anss3[1].innerHTML == "两" && anss3[2].innerHTML == "人") {
				bg3.style.display = "block";
				right3.style.display = "block";
				wrong3.style.display = "none";
				grade1++;
				return grade1;
			} else {
				bg3.style.display = "block";
				right3.style.display = "none";
				wrong3.style.display = "block";
				im3_1.style.display = "none";
				im3_2.style.display = "block";
			}
		}

		function over4() {
			if(anss4[0].innerHTML == "零" && anss4[1].innerHTML == "钱" && anss4[2].innerHTML == "起" && anss4[3].innerHTML == "步") {
				bg4.style.display = "block";
				right4.style.display = "block";
				wrong4.style.display = "none";
				grade1++;
				return grade1;
			} else {
				bg4.style.display = "block";
				right4.style.display = "none";
				wrong4.style.display = "block";
				im4_1.style.display = "none";
				im4_2.style.display = "block";
			}
		}

		function over5() {
			if(anss5[0].innerHTML == "规" && anss5[1].innerHTML == "划" && anss5[2].innerHTML == "路" && anss5[3].innerHTML == "线") {
				bg5.style.display = "block";
				right5.style.display = "block";
				wrong5.style.display = "none";
				grade1++;
				return grade1;
			} else {
				bg5.style.display = "block";
				right5.style.display = "none";
				wrong5.style.display = "block";
				im5_1.style.display = "none";
				im5_2.style.display = "block";
			}
		}

		//为"cho们"绑定touch事件
		for(var i = 0; i < chos1.length; i++) {
			chos1[i].addEventListener("touchstart", function() {
				var cont = this.innerHTML;
				if(anss1[anss1.length - 1].innerHTML != "") {
					over1();
				} else {
					for(var j = 0; j < anss1.length; j++) {
						if(anss1[j].innerHTML == "") {
							console.log("00");
							anss1[j].innerHTML = cont;
							if(j == anss1.length - 1) {
								over1();
							}
							break;
						}
					}
				}
			}, false);
		}
		for(var i = 0; i < chos2.length; i++) {
			chos2[i].addEventListener("touchstart", function() {
				var cont = this.innerHTML;
				if(anss2[anss2.length - 1].innerHTML != "") {
					over2();
				} else {
					for(var j = 0; j < anss2.length; j++) {
						if(anss2[j].innerHTML == "") {
							console.log("00");
							anss2[j].innerHTML = cont;
							if(j == anss2.length - 1) {
								over2();
							}
							break;
						}
					}
				}
			}, false);
		}
		for(var i = 0; i < chos3.length; i++) {
			chos3[i].addEventListener("touchstart", function() {
				var cont = this.innerHTML;
				if(anss3[anss3.length - 1].innerHTML != "") {
					over3();
				} else {
					for(var j = 0; j < anss3.length; j++) {
						if(anss3[j].innerHTML == "") {
							console.log("00");
							anss3[j].innerHTML = cont;
							if(j == anss3.length - 1) {
								over3();
							}
							break;
						}
					}
				}
			}, false);
		}
		for(var i = 0; i < chos4.length; i++) {
			chos4[i].addEventListener("touchstart", function() {
				var cont = this.innerHTML;
				if(anss4[anss4.length - 1].innerHTML != "") {
					over4();
				} else {
					for(var j = 0; j < anss4.length; j++) {
						if(anss4[j].innerHTML == "") {
							console.log("00");
							anss4[j].innerHTML = cont;
							if(j == anss4.length - 1) {
								over4();
							}
							break;
						}
					}
				}
			}, false);
		}
		for(var i = 0; i < chos5.length; i++) {
			chos5[i].addEventListener("touchstart", function() {
				var cont = this.innerHTML;
				if(anss5[anss5.length - 1].innerHTML != "") {
					over5();
				} else {
					for(var j = 0; j < anss5.length; j++) {
						if(anss5[j].innerHTML == "") {
							console.log("00");
							anss5[j].innerHTML = cont;
							if(j == anss5.length - 1) {
								over5();
							}
							break;
						}
					}
				}
			}, false);
		}

		//计时5秒跳转
		var i = 0;

		function timing() {
			timer = setInterval(function() {
				if(i < 4) {
					str[i].style.display = "none";
					str[i + 1].style.display = "block";
					(str2[i + 1])();
					i++;
				} else {
					clearInterval(timer);
					if(grade1 == 5) {
						window.location.href = "http://www.baidu.com";
					} else if(grade1 >= 2 && grade1 <= 4) {
						window.location.href = "http://www.youku.com/"
					} else if(grade1 < 2) {
						window.location.href = "https://www.taobao.com/"
					}
				}
			}, 3000);
		}
		timing();
	</script>

</html>